<template>
  <div>
    <h3>home页面</h3>
    <!-- <ul>
      <li v-for="item in $store.state.users" :key="item.id">{{ item.name }}</li>
    </ul> -->
    <hr />
    <ul>
      <li v-for="item in users" :key="item.id">{{ item.name }}--{{ item.age }}</li>
    </ul>
    <hr />
    <div>vuex中的数据 : {{ $store.state.count }}</div>
    <!-- 同步修改state中的数据 -->
    <button @click="incr">++++</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  /* async mounted() {
    // console.log(this.$store)
    // 通过网络请求获取用户列表数据
    let ret = await axios.get('/api/users')
    console.log(ret.data)
  }, */
  // 计算属性
  computed: {
    users() {
      /* return this.$store.state.users.map(item => ({
        ...item,
        age: item.age > 20 ? '保密' : item.age
      })) */
      return this.$store.getters.users
    }
  },
  mounted() {
    // 参数1：定义actions的类型名称
    // 参数2：参数，可选
    this.$store.dispatch('fetchUserAction', 1000)
  },
  methods: {
    incr() {
      // 参数1：让mutation操作的名称
      // 参数2：传给mutation的数据
      this.$store.commit('setCount', 2)
    }
  }
}
</script>

<style lang="scss" scoped></style>
